<template>
	<view :style="viewColor">
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<view class='list'>
					<view class="item" style="border-bottom: 0;">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold" style="color: red;"><text class="item-require">*</text>完善资料，推送精准客户</text>
						</view>
					</view>
					<view class="item" style="border: none;">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>上传头像</text>
							<view class="pictrue" @click="uploadpicAvatar" style="border-radius: 50%;">
								<image :src="userInfo.avatar || '/static/images/f.png'" style="border-radius: 50%;"></image>
								<view class="radius" ><span class="iconfont iconfonta icon-jilu-xuanzhong"></span></view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>个人名称</text>
							<input type="text" maxlength="30" :placeholder="userInfo.nickname" v-model="nickname" @input="validateBtn"
							 placeholder-class='placeholder' class="m-l30" />
						</view>
					</view>
					<!-- <view class="item">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db acea-row row-middle">
									<text class="item-name font-size36-bold">我的行业</text>
									<picker class="select_label m-l30" @change="bindPickerChange1" :value="index1" :range="setLabelList" range-key="label_name">
										<input placeholder="请选择行业类型" type="text" disabled readonly v-model="mer_storeType">
									</picker>
								</view>
							</view>
						</view>
					</view> -->
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>我的行业</text>
							<input type="text" placeholder="请选择行业类型" v-model="mer_storeType" disabled readonly placeholder-class='placeholder' class="m-l30"  @click="is_label_search_popup = true" />
						</view>
					</view>
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>主营业务</text>
							<input type="text" maxlength="30" placeholder="请输入主营业务" v-model="userInfo.business" @input="validateBtn"
							 placeholder-class='placeholder' class="m-l30" />
						</view>
					</view>
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>微*号</text>
							<input type="text" placeholder="请输入私聊号" v-model="userInfo.we_chat_account" @input="validateBtn" placeholder-class='placeholder' class="m-l30" />
						</view>
					</view>
					<view class="item no-border">
						<view class='acea-row row-middle'>
							<view>
								<text class="item-title font-size36-bold">微*号二维码</text>
								<view class="item-desc">
								 	(图片格式支持JPG、PNG、JPEG)
								</view>
							</view>
							<view class="upload" style="margin-left: auto; margin-top: 0;">
								<view class='pictrue' @click="uploadImage(1)" v-if="userInfo.we_chat_qrcode">
									<image :src='userInfo.we_chat_qrcode'></image>
									<!-- <text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text> -->
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' v-else @click='uploadImage(1)'>
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold"><text class="item-require">*</text>联系电话</text>
							<input type="text" placeholder="请输入电话" v-model="userInfo.phone" @input="validateBtn" placeholder-class='placeholder' class="m-l30" />
						</view>
					</view>
					
					<view class="item">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db row-middle">
									<text class="item-name font-size36-bold"><text class="item-require">*</text>目标客户行业</text>
									<view class="customer_industry">
										<view class="customer_industry_item" v-for="(item, index) in userInfo.customer_industry" :key="index" @click="delCustomerIndustry(index)">
											{{userInfo.customer_industry_name[index]}}<text class="customer_industry_close">×</text>
										</view>
										<view class="customer_industry_item on" v-if="userInfo.customer_industry && userInfo.customer_industry.length < 3" @click="is_label_list_popup = true">
											选择客户行业
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">公司介绍</text>
							<textarea placeholder="请填写公司介绍" v-model="userInfo.company_profile" @input="validateBtn" placeholder-class='placeholder'></textarea>
						</view>
					</view> -->
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-bold">公司介绍</text>
							<textarea placeholder="请填写公司介绍" v-model="userInfo.service" @input="validateBtn" placeholder-class='placeholder' style="padding-bottom: 0;height: 130rpx;"></textarea>
							<view class="upload" style="margin-bottom: 20rpx;margin-top: 20rpx;">
								<view class='pictrue' v-for="(item,index) in service_pics" :key="index" :data-index="index" @click="getPhotoClickIdx">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic(index, 1)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic2' v-if="service_pics.length < 3">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item no-border">
						<view class='acea-row row-middle'>
							<view>
								<text class="item-title font-size36-bold">个人主页背景图</text>
								<view class="item-desc">
								 	(图片格式支持JPG、PNG、JPEG)
								</view>
							</view>
							<view class="upload" style="margin-left: auto; margin-top: 0;">
								<view class='pictrue' v-for="(item,index) in pics" :key="index" :data-index="index" @click="getPhotoClickIdx">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 1">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="row-middle acea-row row-middle">
							<text class="item-name font-size36-bold">上门服务</text>
							<radio-group  @change="changeOnsiteSvc"  class="new_service_file_type_radio acea-row row-middle m-l30">
								<view class="new_service_file_type_radio_item">
									开启　<radio :value="1" :checked="userInfo.onsite_svc == 1" color="#FFE103" class="radio_d" />
								</view>
								<view class="new_service_file_type_radio_item">
									关闭　<radio :value="0" :checked="userInfo.onsite_svc == 0" color="#FFE103" class="radio_d" />
								</view>
							</radio-group>
						</view>
					</view>
					<button class='submitBtn' :class="validate === true ? 'on':''" @click="formSubmit">{{validate === true ? '提交申请' : '请继续完善信息'}}</button>
				</view>
			</view>
		</form>
		<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
		</view>
		<labelListPopup :is_label_list_popup="is_label_list_popup" :labelList="labelList" :tabId="userInfo.customer_industry" :type="1" @onChangeTag="onChangeTag"></labelListPopup>
		<labelSearchListPopup :setLabelList="setLabelList" :multiIndex="multiIndex" :is_label_search_popup='is_label_search_popup' @closeLabelSearchPopup="closeLabelSearchPopup" @changeMultiIndex="changeMultiIndex" @selectLabelSearchPopup="selectLabelSearchPopup"></labelSearchListPopup>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>
<script>
	import {
		verify,
	} from '@/api/store.js';
	import {
		getLabelList
	} from '@/api/api.js'
	import {
		getCaptcha,
		getUserInfo,
		editAvatar
	} from "@/api/user";
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import authorize from '@/components/Authorize';
	import labelListPopup from '@/components/labelListPopup'
	import labelSearchListPopup from '@/components/labelSearchListPopup';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			"jyf-parser": parser,
			authorize,
			labelListPopup,
			labelSearchListPopup
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				text: "获取验证码",
				codeUrl: "",
				disabled: false,
				isShowCode: false,
				loading: false,
				validate: false,
				codeVal: "",
				index: 0,
				mer_storeType: '',
				service_pics: [],
				pics: [],
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				nickname: '',
				userInfo:{
					avatar: '',
					nickname: '',
					we_chat_account: '',
					phone: '',
					// company_profile: '',
					service: '',
					label_id: 0,
					label_id2: 0,
					onsite_svc: 1, // 是否开启上门服务
					business: '', // 主营业务
				},
				labelList: [],
				setLabelList: [{
					label_name: '',
					label_id: ''
				}],
				index1: 0,
				is_label_list_popup: false,
				multiIndex:[0, 0],
				is_label_search_popup: false,
			};
		},
		beforeDestroy() {
		},
		computed: configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			if (this.isLogin) {
				this.getUserInfo();
				this.getLabel();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		methods: {
			/**
			 * 上传图片文件
			 *
			 */
			uploadpicAvatar: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					// console.log(999, res);
					that.userInfo.avatar = res.data.path;
				});		
			},
			onChangeTag(data) {
				let that = this;
				let index = data.index
				let customer_industry = that.userInfo.customer_industry,
				customer_industry_name = that.userInfo.customer_industry_name;
				if(customer_industry.includes(Number(that.labelList[index].label_id)) || customer_industry.length >= 3) return false
				customer_industry.push(that.labelList[index].label_id)
				customer_industry_name.push(that.labelList[index].label_name)
				if(customer_industry.length == 3) that.is_label_list_popup = false;
				that.$set(that.userInfo, 'customer_industry', customer_industry);
				that.$set(that.userInfo, 'customer_industry_name', customer_industry_name);
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					let userInfo = {
						avatar: res.data.avatar,
						nickname: res.data.nickname,
						we_chat_account: res.data.we_chat_account,
						we_chat_qrcode: res.data.we_chat_qrcode,
						phone: res.data.phone,
						// company_profile: res.data.company_profile,
						service: res.data.service,
						label_id: res.data.label_id,
						label_id2: res.data.label_id2,
						customer_industry: res.data.customer_industry.map(Number),
						customer_industry_name: res.data.customer_industry_name,
						onsite_svc: res.data.onsite_svc, // 是否开启上门服务
						business: res.data.business,
					}
					let pics = [];
					res.data.user_top_back && pics.push(res.data.user_top_back);
					that.pics = pics;
					that.service_pics = res.data.service_pics || [];
					that.userInfo = userInfo;
					that.$set(that, 'userInfo', that.userInfo);
					that.mer_storeType = res.data.label_name[0] + (res.data.label_name[1] ? '-' + res.data.label_name[1] : '');
					that.validateForm()
				});
			},
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort}).then(res=>{
					that.labelList = res.data.list;
					that.setLabelList = res.data.list
				}).catch(err=>{
					console.log('err', err);
				})
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
				let idx = e.target.value
				this.mer_storeType = this.setLabelList[idx]['label_name']
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				_this.imgPreview(_this.pics, idx);
			},
			// 图片预览
			imgPreview: function(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			toggleTab(str) {
				this.$refs[str].show();
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			again() {
				this.getcaptcha()
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function() {
				let that = this;
				// if(that.pics.length >= 3){
				// 	return that.$util.Tips({title: '最多上传3张图片'});
				// }
				that.$util.uploadImageOne('upload/image', function(res) {
					that.pics.push(res.data.path);
					that.$set(that, 'pics', that.pics);
				});
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic2: function() {
				let that = this;
				// if(that.pics.length >= 3){
				// 	return that.$util.Tips({title: '最多上传3张图片'});
				// }
				that.$util.uploadImageOne('upload/image', function(res) {
					that.service_pics.push(res.data.path);
					that.$set(that, 'service_pics', that.service_pics);
				});
			},
			uploadImage(type) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					if (type == 1) {
						that.userInfo.we_chat_qrcode = res.data.path;
						that.$set(that, 'userInfo', that.userInfo);
					}
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic: function(index, type = 0) {
				let that = this;
				if (type == 1) {
					that.service_pics.splice(index, 1);
					that.$set(that, 'service_pics', that.service_pics);
				} else {
					that.pics.splice(index, 1);
					that.$set(that, 'pics', that.pics);
				}
			},
			getcaptcha() {
				let that = this
				getCaptcha().then(data => {
					that.codeUrl = data.data.captcha; //图片路径
					that.codeVal = data.data.code; //图片验证码
					that.codeKey = data.data.key //图片验证码key
				})
				that.isShowCode = true;
			},
			sendCode() {
				if (this.disabled) return;
				this.disabled = true;
				let n = 60;
				this.text = "剩余 " + n + "s";
				const run = setInterval(() => {
					n = n - 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.text = "剩余 " + n + "s";
					if (this.text < "剩余 " + 0 + "s") {
						this.disabled = false;
						this.text = "重新获取";
					}
				}, 1000);
			},
			formSubmit: function(e) {
				let that = this;
				if (that.validateForm() && that.validate) {
					let requestData = {
						avatar: that.userInfo.avatar,
						nickname: that.nickname,
						phone: that.userInfo.phone,
						we_chat_account: that.userInfo.we_chat_account,
						we_chat_qrcode: that.userInfo.we_chat_qrcode,
						// company_profile: that.userInfo.company_profile,
						service: that.userInfo.service,
						service_pics: that.service_pics,
						label_id: that.userInfo.label_id,
						label_id2: that.userInfo.label_id2,
						customer_industry: that.userInfo.customer_industry,
						user_top_back: that.pics[0],
						is_perfect: 1,
						onsite_svc: that.userInfo.onsite_svc, // 是否开启上门服务
						business: that.userInfo.business
					}
					that.validate = false;
					editAvatar({...requestData}).then(res => {
						that.validate = true;
						if (res.status == 200) {
							that.$Cache.set('engagedIndustry', that.userInfo.label_id);
							that.$Cache.set('customerIndustry', that.userInfo.customer_industry.join(','))
							that.$util.Tips({
								title: res.message
							}, {
								tab: 1,
								url: '/pages/user/index'
							});
						}
					}).catch(res => {
						that.validate = true;
						that.$util.Tips({
							title: res
						});
					})
				}else{
					// that.$util.Tips({
					// 	title: '请完善资料信息'
					// })
				}
			},
			validateBtn: function() {
				let that = this,
					value = that.userInfo;
				if (value.avatar && value.nickname && value.we_chat_account && value.phone && /^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone) && value.label_id) {
					that.validate = true;
				}else{
					that.validate = false;
				}
			},
			validateForm: function() {
				let that = this,
					value = that.userInfo,
					num = 7;
				if (!value.avatar) {
					// return that.$util.Tips({
					// 	title: '请上传用户头像'
					// });
				} else {
					num--;
				}
				if (!value.nickname) {
					// return that.$util.Tips({
					// 	title: '请输入用户昵称'
					// });
				} else {
					num --;
				}
				if (!value.we_chat_account) {
					// return that.$util.Tips({
					// 	title: '请输入微信账号'
					// });
				} else {
					num--;
				}
				if (!value.phone || !/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) {
					// return that.$util.Tips({
					// 	title: '请输入正确的手机号码'
					// });
				} else {
					num--;
				}
				if (!value.label_id) {
					// return that.$util.Tips({
					// 	title: '请选择我的行业'
					// });
				} else {
					num--;
				}
				if (!value.business) {
					// return that.$util.Tips({
					// 	title: '请填写我的主营业务'
					// });
				} else {
					num--;
				}
				if (!value.customer_industry.length) {
					// return that.$util.Tips({
					// 	title: '请选择我的目标客户行业'
					// });
				} else {
					num--;
				}
				if (num > 0) {
					that.$util.Tips({
						title: '还需要完善'+num+'项资料'
					});
					return false;
				}
				// if (!value.yanzhengma) return that.$util.Tips({
				// 	title: '请填写验证码'
				// });
				/* if (!value.company_profile) return that.$util.Tips({
					title: '请输入公司介绍'
				}); */
				/* if (!value.service) return that.$util.Tips({
					title: '请输入服务介绍'
				}); */
				that.validate = true;
				return true;
			},
			success(data) {
				this.$refs.verify.hide();
				this.code(data);
			},
			handleVerify() {
				if (!this.merchantData.phone) return this.$util.Tips({
					title: '请输入手机号'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.merchantData.phone)) return this.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!this.isAgree) return this.$util.Tips({
					title: '请勾选并同意入驻协议'
				});
				this.$refs.verify.show();
			},
			delCustomerIndustry(index) {
				let that = this,
				customer_industry = this.userInfo.customer_industry,
				customer_industry_name = this.userInfo.customer_industry_name;
				customer_industry.splice(index, 1);
				customer_industry_name.splice(index, 1);
				that.$set(that.userInfo, 'customer_industry', customer_industry);
				that.$set(that.userInfo, 'customer_industry_name', customer_industry_name);
			},
			changeOnsiteSvc(e) {
				this.userInfo.onsite_svc = e.detail.value
			},
			// 关闭搜索标签
			closeLabelSearchPopup() {
				this.is_label_search_popup = false;
				this.mer_storeType = this.setLabelList[this.multiIndex[0]].label_name + (this.setLabelList[this.multiIndex[0]].children ? '-' + this.setLabelList[this.multiIndex[0]].children[this.multiIndex[1]].label_name : '');
				this.userInfo.label_id = this.setLabelList[this.multiIndex[0]].label_id;
				this.userInfo.label_id2 = this.setLabelList[this.multiIndex[0]].children ? this.setLabelList[this.multiIndex[0]].children[this.multiIndex[1]].label_id : 0;
			},
			// 选择便签发送改变时触发
			changeMultiIndex(multiIndex) {
				this.$set(this, 'multiIndex', multiIndex);
			},
			// 搜索标签弹窗
			async selectLabelSearchPopup(keywords) {
				let that = this;
				if(!keywords) {
					that.$set(that, 'setLabelList', labelList);
				}else{
					let setLabelList = [];
					that.labelList.forEach((item) => {
						if(item.label_name.includes(keywords)) {
							setLabelList.push(item);
						}else{
							if(item.children && item.children.length) {
								let children = [];
								item.children.forEach((item2) => {
									if(item2.label_name.includes(keywords)) {
										children.push(item2);
									}
								})
								if(children.length) {
									item.children = children;
									setLabelList.push(item);
								}
							}
						}
						
					})
					if(setLabelList.length) {
						that.$set(that, 'setLabelList', setLabelList);
					}else{
						return that.$util.Tips({title: '暂无该搜索项'})
					}
				}
				this.$set(this, 'multiIndex', [0,0]);
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FADC00!important;
	}
	::v-deepcheckbox .uni-checkbox-input.uni-checkbox-input-checked,
	::v-deepcheckbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
	.uni-input-placeholder {
		color: #B2B2B2;
	}
	.item {
		margin-top: 30rpx;
		.pictrue {
			margin: 0 0 0 30rpx!important;
			position: relative;
			image {
			}
			.radius {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				color: red;
			}
		}
	}
	.item-name{
		color: #323232;
		line-height: 44rpx;
		.item-require {
			color: red;
		}
	}
	.uni-list-cell {
		.select_label {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			input {
				display: inline-table;
			}
		}
		// position: relative;
		.iconfont {
			font-size: 14px;
			color: #7a7a7a;
			// position: absolute;
			// right: 15px;
			// top: 7rpx;
			display: inline-block;
		}
		// .icon-guanbi2{
		// 	right: 35px;
		// }
	}
	.merchantBgCount{
		line-height: 0;
	}
	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}
	.merchantsSettled .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 0 30rpx;
		margin: 0 15px;
		position: absolute;
		top: 30rpx;
		width: calc(100% - 30px);
		
	}
	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 240rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}
	.merchantsSettled .list .item {
		border-bottom: 1px solid #eee;
		position: relative;
		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}
		.item-title {
			color: #666666;
			display: block;
		}
		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}
	.acea-row,.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.upload {
		margin-top: 20rpx;
	}
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
		.new_service_file_type_radio_item {
			margin-right: 50rpx;
			.radio_d {
				margin-left: 10rpx;
			}
		}
	}
	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}
		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;
			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}
		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: 0px;
			right: 0px;
		}
	}
	.uni-list-cell-db{
		position: relative;
	}
	.wenhao{
		width: 34rpx;
		height: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-radius: 50%;
		background: #E3E3E3;
		color: #ffffff!important;
		margin-left: 4rpx;
		position: absolute;
		left: 122rpx;
	}
	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}
	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}
	.merchantsSettled .list .item input, .merchantsSettled .list .item textarea , .customer_industry, .merchantsSettled .list .item radio-group{
		padding: 40rpx 0;
		font-size: 30rpx;
		font-weight: 400;
		color: #767676;
		line-height: 42rpx;
	}
	.customer_industry {
		display: flex;
		flex-wrap: wrap;
		.customer_industry_item{
			padding: 5rpx 10rpx;
			background: var(--view-theme);
			color: #1C211D;
			border-radius: 30rpx;
			margin-right: 10rpx;
			display: flex;
			align-items: center;
		}
		.on {
			background-color: #ccc;
		}
		.customer_industry_close {
			border-radius: 50%;
			width: 20rpx;
			height: 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
		}
	}
	.merchantsSettled .list .item textarea{
		height: 190rpx;
	}
	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}
	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}
	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}
	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}
	.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}
	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid var(--view-theme);
		border-radius: 15px;
		color: var(--view-theme);
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.merchantsSettled .submitBtn {
		width: 588rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #1C211D;
		background: #E3E3E3;
		margin-top: 25px;
		margin-bottom: 50rpx;
		// pointer-events: none;
	}
	.merchantsSettled .submitBtn.on {
		background: var(--view-theme);
			// pointer-events: all;
	}
	uni-checkbox-group,
	.settleAgree {
		display: inline-block;
		font-size: 24rpx;
	}
	uni-checkbox-group {
		color: #b2b2b2;
	}
	.settleAgree {
		color: var(--view-theme);
		position: relative;
		top: 2px;
		left: 8px;
	}
	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}
	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;
			::v-deep p {
				font-size: 13px;
				line-height: 22px;
			}
			::v-deep img {
				max-width: 100%;
			}
		}
	}
	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
	.settledSuccessMain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	.settledSuccessful {
		flex: 1;
		width: 100%;
		padding: 0 56px;
		height: auto;
		background: #fff;
		text-align: center;
	}
	.settledSuccessful .image {
		width: 189px;
		height: 157px;
		margin-top: 66px;
	}
	.settledSuccessful .title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-top: 35px;
	}
	.settledSuccessful .info {
		color: #A0A0A0;
		font-size: 13px;
		margin-top: 12px;
	}
	.settledSuccessful .goHome {
		margin: 60px auto 0;
		line-height: 43px;
		color: #282828;
		font-size: 15px;
		border: 1px solid #B4B4B4;
		border-radius: 60px;
	}
	::v-deep uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}
	.loadingicon {
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	.icon-xiangyou {
		font-size: 22rpx;
	}
	// #ifdef MP
	checkbox-group {
		display: inline-block;
	}
	// #endif
	.setAgCount{
		::v-deep table{
			border:  1px solid #DDD;
			border-bottom: none;
			border-right: none;
		}
		::v-deep td, th {
		    padding: 5rpx 10rpx;
		    border-bottom: 1px solid #DDD;
			border-right:  1px solid #DDD;
		}
	}
	.m-l30 {
		 margin-left: 30rpx;
	}
</style>
